<template>
  <div class="rest">
    <!--顶部标题-->
    <div class="content-top">
      <span>统计</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/SandS/table">报表统计</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/rest">剩休查询</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/cwatable">考勤报表</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="可休时长明细" name="1" />
            <!-- <el-tab-pane label="已休时长明细" name="2" /> -->
          </el-tabs>
          <div class="view-content">
            <div class="content-content-right">
              <!-- 可休时长明细 Hugh  -->
              <div v-if="activeName == 1">
                <div class="content-head"></div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="true"
                    :columns="Hugh.tableConfig.columns"
                    :url="Hugh.tableConfig.url"
                    :pparams="Hugh.tableConfig.pparams"
                    @tableBubbling="HughTableBubbling"
                  ></Table>
                </div>
              </div>
              <!-- 已休时长明细 Cease -->
              <div v-if="activeName == 2">
                <div class="content-head"></div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="true"
                    :columns="Cease.tableConfig.columns"
                    :url="Cease.tableConfig.url"
                    :pparams="Cease.tableConfig.pparams"
                    @tableBubbling="CeaseTableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import Vmask from '@/components/vmask.vue'
import mixins from '@/const/mixins'

export default {
  name: 'Rest',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      Hugh: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        data5: [],
        tableConfig: {
          url: '/rest/checkOverTime',
          columns: [
            {
              dataIndex: 'workerNo',
              title: '工号',
            },
            {
              dataIndex: 'workerName',
              title: '姓名',
            },
            {
              dataIndex: 'duration',
              title: '可休时长',
            },
            {
              dataIndex: 'type',
              title: '原因备注',
              type: 'meiju',
              meiju: {
                '1': '工作日加班',
                '2': '节假日接班',
              },
            },
            {
              dataIndex: 'duration',
              title: '补休时间',
            },
          ],
          pparams: {
            date: '',
            pageNum: 1,
            pageSize: 15,
          },
        },
      },
      Cease: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        data5: [],
        tableConfig: {
          url: '/rest/checkOverTime',
          columns: [
            {
              dataIndex: 'workerNo',
              title: '工号',
            },
            {
              dataIndex: 'workerName',
              title: '姓名',
            },
            {
              dataIndex: 'duration',
              title: '可休时长',
            },
            {
              dataIndex: 'type',
              title: '原因备注',
              type: 'meiju',
              meiju: {
                '1': '工作日加班',
                '2': '节假日接班',
              },
            },
            {
              dataIndex: 'duration',
              title: '补休时间',
            },
          ],
          pparams: {
            pageNum: 1,
            pageSize: 15,
          },
        },
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '类型',
            width: '',
            type: 'text',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写类型',
            disabled: false,
            required: true,
          },
          {
            title: '备注',
            width: '',
            type: 'textarea',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写备注',
            disabled: false,
            required: true,
            rows: 3,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      containerArr: ['Hugh', 'Cease'],
      allWorker: [],
    }
  },
  computed: {
    user() {
      return this.$store.state
    },
  },
  created() {
    window._this = this
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // 根1据activeName加载对应tab数据
      let activeName = this.activeName
      let container = (this.container = this[
        this.containerArr[activeName * 1 - 1]
      ]) // 拿 tab con 进行操作
      let workerNo = this.user.userId

      delete container.tableConfig.pparams.workerNo // 删除申请人工号
      delete container.tableConfig.pparams.checkNo // 删除审核人工号
      delete container.tableConfig.pparams.copyNo // 删除抄送人工号
      delete container.tableConfig.pparams.auditNo // 删除审批人工号

      console.log(activeName, 'activeName')
      if (activeName == 1 && !this.container.isLoad) {
        // 剩休汇总
        // container.tableConfig.pparams.workerNo = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
    },
    async FnSearch() {},
    HughTableBubbling(e) {
      console.log(e, 'SearchTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask
    },
    CeaseTableBubbling(e) {
      console.log(e, 'SearchTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      }
    },
    FnAdd() {
      this.mask.showMask = true
      this.mask.title = '添加类型'
    },
    FnDelete() {},
  },
}
</script>

<style lang="less">
.rest {
  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .content-table {
    .table-item {
      height: 50px;
      border-bottom: 1px solid #c1c1c1;

      span {
        font-size: 15px;

        &:nth-child(2) {
          color: rgb(0, 102, 225);
        }

        &:last-child {
          font-size: 14px;
          color: rgb(97, 167, 224);
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .page {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
</style>
